<template>
  <div class="salesorder-add-order">
    <link
      href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
      rel="stylesheet"
      type="text/css"
    />
    <div class="title">
      <h1>创建长期寄售销货单</h1>
      <!-- <el-row>
        <el-col :span="16" class="desc">描述性文字</el-col>
        <el-col :span="8" class="right">
          <el-button @click="onSaveDraft">暂存</el-button>
          <el-button type="primary" plain @click="onPrev" v-if="active_index !== 1">上一步</el-button>
          <el-button type="primary" @click="onNext" v-if="active_index !== 3">下一步</el-button>
          <el-button type="success" @click="onSubmit" v-else>提交</el-button>
        </el-col>
      </el-row> -->
    </div>
    <div class="block">
      <section class="sectionOrder">
        <el-steps
          :active="active_index - 1"
          process-status="success"
          finish-status="success"
          align-center
        >
          <el-step title="选择供应商及合同" />
          <el-step title="添加消耗产品" />
          <el-step title="订单信息" />
        </el-steps>
      </section>
    </div>
    <article v-show="active_index === 1" class="article-box">
      <supplier-and-contract-component
        :supplier-id.sync="form_data.supplier"
        :contract-id.sync="form_data.contract"
        :is-edit="is_edit"
        :is-first-mount.sync="isFirstMount"
        :bus-model="bus_model"
        :onsign-order-type="true"
        :order-type="form_data.ordertype"
        :products="form_data.products"
        :active-index="active_index"
        @change="onSupplierAndContractChange"
        @changedatas="contractChangeChangedatas"
      />
    </article>
    <article
      v-show="active_index === 2"
      class="article-box select-product-corver"
    >
      <div class="block">
        <section>
          <el-row class="prdocut-list-header-detail">
            <el-col :span="12">
              <div>
                供应商：<span>{{
                  submit_data.supplierVo.vendorName || ''
                }}</span>
              </div>
            </el-col>
          </el-row>
        </section>
      </div>
      <purchase-products-list-component
        title-str="产品"
        :products.sync="form_data.products"
        :step-one-form-data="submit_data"
        :supplier-id.sync="form_data.supplier"
        :seq-no-vo-list="seqNoVoList"
        @removeSeqNoVoList="removeSeqNoVoListFn"
        @repliceProduct="repliceProductFn"
      />
    </article>
    <article v-show="active_index === 3" class="article-box">
      <div class="block">
        <header>
          <h2>备注信息</h2>
        </header>
        <section>
          <el-input
            v-model="form_data.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            maxlength="80"
            show-word-limit
          />
        </section>
      </div>
      <div class="block">
        <header>
          <h2>附加信息</h2>
        </header>
        <section>
          <el-tabs>
            <el-tab-pane label="附加信息">
              <el-form-renderer
                ref="expandFormRenderer"
                v-model="form_data.extend"
                class="form-renderer"
                label-width="200"
                :content="extend_model"
                inline
              />
            </el-tab-pane>
            <el-tab-pane label="附件">
              <!-- 其他附件 -->
              <section class="table-section other_file_box">
                <div style="margin-bottom:10px;">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="addOtherFileItem"
                  >
                    添加附件
                  </el-button>
                  <span style="margin-left: 20px;color:red;"
                    >可电脑上传文件及图片；也可通过手机扫码上传文件及图片;
                    &nbsp;<span class="allow">支持JPG/PNG/PDF格式</span></span
                  >
                </div>
                <el-editable
                  :columns="ACCESSORIES_COLUMNS"
                  :data="page_data.other_info.other.content"
                  :payload="page_data.other_info.other"
                  height="200"
                >
                  <template slot="default-index" slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                  <template slot="default-ops" slot-scope="scope">
                    <el-button type="text" @click="removeCurOtherItem(scope)">
                      删除
                    </el-button>
                  </template>
                  <template slot="default-fileUrl" slot-scope="scope">
                    <TableUpload
                      :imgname="scope.row.fileName"
                      :imgsrc="scope.row.fileUrl"
                      :keystr="scope.$index"
                      @ReturnImgUrl="returnOtherFileUrl"
                    />
                  </template>
                </el-editable>
              </section>
            </el-tab-pane>
          </el-tabs>
        </section>
      </div>
      <div
        v-if="
          submit_data &&
            submit_data.contractVo &&
            Number(submit_data.contractVo.isSeqNoManagement)
        "
        class="block seq_list_box"
      >
        <header>
          <span class="serial_number">*</span>
          <h2>&nbsp;添加序列号</h2>
        </header>
        <el-row class="block-item">
          <el-col :span="12">
            <el-button type="primary" @click="onOpenImportProduct">
              模板导入
            </el-button>
            <el-divider direction="vertical" />
            <el-button type="text" @click="onGetProductTemplate">
              模板下载
            </el-button>
          </el-col>
        </el-row>
        <el-editable :columns="SERIAL_NUMBER" :data="seqNoVoList" height="500">
          <template slot="default-ops" slot-scope="scope">
            <el-button type="text" @click="removeSeqNo(scope)">
              删除
            </el-button>
          </template>
        </el-editable>
      </div>
    </article>

    <el-dialog title="提交订单" :visible.sync="dialogVisible" width="30%">
      <span>确认是否提交订单？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          :disabled="submit_loading"
          :loading="submit_loading"
          type="primary"
          @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="toSubmitDialogVisible"
      width="30%"
    >
      <span>同时生成一张待提交的长期寄售订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="konw">知道了</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="occupy"
      width="30%"
    >
      <span>暂存的销售产品被别的订单使用,请订正寄售销售产品</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="occupyKonw">知道了</el-button>
      </span>
    </el-dialog>
    <SerialUpload
      ref="upload"
      :title-str="titleStr"
      :params="productsObj"
      @complete="getSeqNoVoList"
    />
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" src="./index.less"></style>
